<template>
  <div class="attachment-picker-wrap">
    <div v-if="!isExhibition" class="up-attachment">
      <el-form-item :rules="[{ required: isVerify, message: '请选择附件', trigger: 'change' }]" :prop="moduleName + '.' + keyField" label="" class="normal-form-item">
        <up-attachment
          :import-api="'/admin/contract/file/upload'"
          :hide-confirm="true"
          :file-list="selectData[keyField]"
          :limit="10"
          :show-thumbnail="showThumbnail"
          :accept="uploadAccept"
          btn-text="上传文件"
          @complateSetData="complateSetData($event)"
          @removeFileList="removeFileList($event)"
        />
      </el-form-item>
    </div>
    <div v-if="isShowDatePick && !isExhibition" class="date-picker">
      <el-form-item :rules="[{ required: isVerify && dateVerify, message: '请选择截止日期', trigger: 'change' }]" :prop="moduleName + '.' + dateField" label="" class="normal-form-item">
        <el-date-picker
          v-model="selectData[dateField]"
          value-format="timestamp"
          placeholder="截止日期"
          format="yyyy/MM/dd" />
      </el-form-item>
    </div>
    <div v-if="isExhibition" :style="`${showMobilePage?'flex-wrap:wrap':''}`" class="exhibition-box">
      <up-attachment
        :file-list="selectData[keyField]"
        :only-file-list="true"
        :hide-clip-up="true"
        :hide-confirm="true"
        :is-disabled="true"
        :show-thumbnail="showThumbnail"
        :accept="uploadAccept"
        file-container-top="0px"
        btn-text="上传文件"
      />
      <div v-if="isShowDatePick" class="end-time-box">
        <span>{{ selectData[dateField] / 1000 | standardFormat('YYYY/MM/DD') }}</span>
        <span style="color: #666;">(有效期截止日)</span>
      </div>
    </div>
  </div>
</template>
<script>
import upAttachment from '@/components/Common/upAttachment/index';
import { standardFormat } from '@/filters/date';
export default {
  name: 'AttachmentPicker',
  components: { upAttachment, standardFormat },
  filters: {
    standardFormat
  },
  model: {
    prop: 'params',
    event: 'change'
  },
  props: {
    params: { // 需要被绑定的数据
      type: Object,
      default: () => {
        return null;
      }
    },
    hideClipUp: {
      type: Boolean,
      default: true
    },
    keyField: { // 主字段名称
      type: String,
      default: ''
    },
    dateField: { // 日期字段名称
      type: String,
      default: ''
    },
    isShowDatePick: { // 是否显示日期选择
      type: Boolean,
      default: false
    },
    index: { // 对应索引
      type: Number,
      default: null
    },
    moduleName: { // 模块名称
      type: String,
      default: ''
    },
    rules: { // 正则
      type: Object,
      default: () => { return null; }
    },
    isVerify: { // 是否需要验证
      type: Boolean,
      default: true
    },
    dateVerify: { // 截止日期是否验证
      type: Boolean,
      default: true
    },
    isExhibition: { // 是否为展示模式
      type: Boolean,
      default: false
    },
    showThumbnail: { // 是否显示缩略图
      type: Boolean,
      default: false
    },
    maxlength: { // 最多可上传张数
      type: Number,
      default: 9
    },
    uploadAccept: { // 上传文件类型
      type: String,
      default: ''
    },
    showMobilePage: {// 移动端
      type: Boolean,
      default: false
    }
  },
  computed: {
    selectData: {
      get() {
        return this.params;
      },
      set(val) {
        this.$emit('change', val);
      }
    }
  },
  methods: {
    // 获取一些可能有可能没有的值
    saveGetData(data, key, defaultData) {
      if (key in data) {
        return data[key];
      } else {
        return defaultData;
      }
    },
    complateSetData({ data, fileName }) {
      this.createLoading = false;
      const fileList = {
        name: fileName,
        url: data.url,
        time: new Date().getTime()
      };
      if (typeof data === 'string') {
        fileList.url = data;
      } else {
        fileList.url = data.url;
      }
      this.selectData[this.keyField].push(fileList);
      this.$emit('complateSetData');
    },
    removeFileList({ file, index }) {
      this.selectData[this.keyField].splice(index, 1);
      this.$emit('removeFile');
      // this.$refs['dynamicLegalCreate'].validateField('contractInfo.attachment');
    }
  }
};
</script>
<style lang="scss" scoped>
.attachment-picker-wrap {
  display: flex;
}
.date-picker {
  margin-left: 15px;
  & ::v-deep {
    .el-input__inner  {
      padding-left: 25px !important;
    }
  }
}
.exhibition-box {
  display: flex;
  .end-time-box {
    width: 100%;
    margin-left: 24px;
    display: inline-block;
  }
}
</style>
